<template>
    <!-- 应急演练 -->
    <div style="height: 100%">
        <ul class="">
            <li v-for="(item, index) in state.list" :key="index" :class="item.customBgcolor">
                <div class="fl">
                    <img :src="item.img" alt="" />
                    <div v-if="index === 2" class="fl_2">
                        剩余
                        <span>{{ item.name }}</span>
                        天
                    </div>
                    <span v-if="index != 2">{{ item.name }}</span>
                </div>
                <div v-show="!index" class="fr_1">
                    <span>{{ item.val }}</span>
                    次
                </div>
                <div v-show="index === 1" class="fr_2">
                    {{ item.val }}
                </div>
                <div v-show="index === 2" class="fr_3">
                    {{ item.val }}
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, reactive, useCssModule } from 'vue';
import img1 from '@img/round_1.png';
import img2 from '@img/round_2.png';
import img3 from '@img/round_3.png';

const state = reactive({
    list: [
        { name: '今年已演练', val: 5, img: img2, customBgcolor: useCssModule('classes').customBgColor_1 },
        {
            name: '最近一次演练',
            val: '这里是最近一次演练计划名称这里是最近一次演练计划名称',
            img: img1,
            customBgcolor: useCssModule('classes').customBgColor_2
        },
        { name: 20, val: '20:20:10', img: img3, customBgcolor: useCssModule('classes').customBgColor_3 }
    ]
});
</script>

<style module="classes">
.customBgColor_1 {
    background: rgba(72, 224, 162, 0.16);
    border-image: linear-gradient(-23deg, #48e0a2, #57e9ad) 10 10;
}
.customBgColor_2 {
    background: rgba(27, 147, 251, 0.16);
    border-image: linear-gradient(-23deg, #1b93fb, #b0c1d6) 10 10;
}
.customBgColor_3 {
    background: rgba(255, 220, 73, 0.16);
    border-image: linear-gradient(-23deg, #ffdc49, #ffdc49) 10 10;
}
</style>
<style scoped lang="scss">
ul {
    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        margin-bottom: 10px;
        .fl_2 {
            display: flex;
            align-items: center;
            span {
                font-size: 16px;
                color: #fc9933;
            }
        }
        .fr_3 {
            color: #1b93fb;
            font-size: 16px;
            font-weight: bold;
        }
        .fr_2 {
            font-size: 12px;
            color: #1b93fb;
            width: 60%;
            text-align: right;
            @include textHidden(1);
        }
        .fr_1 {
            font-size: 16px;
            color: #fff;
            span {
                color: #48e0a2;
            }
        }

        &:last-of-type {
            margin: 0;
        }
        .fl {
            color: #d3e9fc;
            font-size: 12px;
            display: flex;
            align-items: center;
            img {
                width: 14px;
                height: 14px;
                margin-right: 7px;
            }
        }
    }
}
</style>
